<<!DOCTYPE html>
  <html>

  <head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3地图示例</title>
    <link href="../ol3.13.1/ol.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      @keyframes zoom
      {
        from {top: 0; left: 0; width: 32px; height: 32px;}
        50% {top: -16px; left: -16px; width: 64px; height: 64px;}
        to {top: 0; left: 0; width: 32px; height: 32px;}
      }

      @-moz-keyframes zoom /* Firefox */
      {
        from {top: 0; left: 0; width: 32px; height: 32px;}
        50% {top: -16px; left: -16px; width: 64px; height: 64px;}
        to {top: 0; left: 0; width: 32px; height: 32px;}
      }

      @-webkit-keyframes zoom /* Safari 和 Chrome */
      {
        from {top: 0; left: 0; width: 32px; height: 32px;}
        50% {top: -16px; left: -16px; width: 64px; height: 64px;}
        to {top: 0; left: 0; width: 32px; height: 32px;}
      }

      @-o-keyframes zoom /* Opera */
      {
        from {top: 0; left: 0; width: 32px; height: 32px;}
        50% {top: -16px; left: -16px; width: 64px; height: 64px;}
        to {top: 0; left: 0; width: 32px; height: 32px;}
      }

      img
      {
        display: block;
        position: absolute;
        animation: zoom 5s;
        animation-iteration-count: infinite;
        -moz-animation: zoom 5s; /* Firefox */
        -moz-animation-iteration-count: infinite;
        -webkit-animation: zoom 5s;  /* Safari 和 Chrome */
        -webkit-animation-iteration-count: infinite;
        -o-animation: zoom 5s; /* Opera */
        -o-animation-iteration-count: infinite;
      }

    </style>
    <script type="text/javascript" src="../ol3.13.1/ol.js" charset="utf-8"></script>
  </head>

  <body>
    <div id="map" style="width: 100%"></div>
    <div id="anchor" style="width: 64px;height: 64px;" ><img src="../../img/anchor.png" alt="示例锚点"/>
    </div>
    <script type="text/javascript">
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [104, 30],
          zoom: 10
        })
      });

      var anchor = new ol.Overlay({
        element: document.getElementById('anchor')
      });
      anchor.setPosition([104, 30]);
      map.addOverlay(anchor);
    </script>

  </body>

  </html>